<template>
  <div class="category">
    <!-- 分类页面的头部 -->
    <category-header></category-header>
    <category-sidebar ref="tabControl"></category-sidebar>

    <scroll class="content"
      ref="scroll"
      :probe-type= "3"
      :pull-up-load='true'
      @pullingUp="loadMore">
      <!-- 分类页面的左边栏 -->
      <!-- 分类页面的右边栏 -->
      <category-goods-list
        ref="scroll"
        :goods="showGoods"
      ></category-goods-list>
    </scroll>

    <!-- 页面底部的小图标 -->
    <category-main-tabbar></category-main-tabbar>
  </div>
</template>

<script>
/* 引入组件 */
import CategoryMainTabbar from "components/content/mainTabbar/MainTabbar"
import Scroll from "components/common/scroll/Scroll"
import CategoryGoodsList from "components/content/goods/goodsList"

import CategoryHeader from "./components/header"
import CategorySidebar from "./components/sidebar"

/* 引入发送请求的函数 */
import { getCategoryGoods } from "network/category"
import {dabounce} from 'common/utils'
export default {
  name: "Category",
  components: {
    CategoryHeader,
    CategorySidebar,
    CategoryMainTabbar,
    CategoryGoodsList,
    Scroll,
  },
  data() {
    return {
      goods: {
        species: { list: [] },
        space: { list: [] },
        style: { list: [] },
      },
      currentType: "species",
      tabOffsetTop:0,
      show:false
    };
  },
  created() {
    //1.请求分类页面中品类，空间，风格等多个数据
    this.getCategoryGoods();
  },
  mounted () {
    //监听item中图片加载完成
    const refresh = dabounce( this.$refs.scroll.refresh,50)
    this.$bus.$on("itemImageLoad", () => {
      refresh();
    })

    //使用事件总线的传递方式，进行非父子组件的传递
     this.$bus.$on('tabClick',(index) => {
       this.tabClick(index)
     })
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  methods: {
    /* 事件监听相关的方法 */
     tabClick(index) {
       switch (index) {
         case 0:
           this.currentType = "species";
           break;
         case 1:
           this.currentType = "space";
           break;
         case 2:
           this.currentType = "style";
           break;
       }
     },

    /* 预留上拉加载等多的方法 */
    loadMore () {
      console.log('加载更多的方法')
    },

    /* 网络请求的相关方法 */
    getCategoryGoods() {
      getCategoryGoods().then((res) => {
        // console.log(res);
        this.goods["species"].list.push(...res.result[0].childs);
        this.goods["space"].list.push(...res.result[1].childs);
        this.goods["style"].list.push(...res.result[2].childs);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.category {
  height: 100vh;
  position: relative;
  .content {
    position: absolute;
    overflow: hidden;
    margin-left: 1rem;
    top: 0.44rem;
    bottom: 0.49rem;
    width: 100%;
  }
  
}
.fiexd {
  position: fixed;
  top: 0;
}
</style>
